<template>
  <div class="topic-wrap">
    <div class="gs-nav">我要卖货 > 聊天话题</div>
    <div class="topic-content" v-loading="loading">
      <div class="topic-red">
        <div class="topic-title">
          <p>今日更新</p>
          <img src="../../assets/images/topic-hot.png" />
        </div>
        <div class="topic-list">
           <template v-if="todayData.length">
              <!-- <p v-for="item in todayData" :key="item.id">{{item.val}}</p> -->
              <div id="todayword"></div>
          </template>
          <div v-else class="no-data">暂无数据</div>
        </div>
      </div>
      <div class="topic-blue">
        <div class="topic-title">
          <p>全部热词</p>
          <img src="../../assets/images/topic-all.png" />
        </div>
        <div class="topic-list">
           <template v-if="allHotWord.length">
              <!-- <p v-for="item in allHotWord" :key="item.id">{{item.val}}</p> -->
              <div id="allword"></div>
          </template>
          <div v-else class="no-data">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setToolsIndex',3)
  },
  layout: 'internalouts',
  mounted() {
  },
  components: {
    
  },
  data() {
    return {
      allHotWord:[{name: '',value: 0}],//全部热词
      todayData:[{name: '',value: 0}],//今日热词
      loading:false,  //加载
    }
  },
  methods: {
    // 设置直播热词
    setTodayWordCloud () {
      let todaywordcloud = this.$echarts.init(document.getElementById('todayword'));
      var option = {
        backgroundColor: "#fff",
        series: [{
          type: 'wordCloud',
          shape: 'smooth',//设置云词形状
          left: 'center',
          top: 'center',
          width: '100%',
          height: '100%',
          right: null,
          bottom: null,
          sizeRange: [10, 48],//设置云词字体大小范围
          rotationRange: [0, 0],//设置云词旋转范围
          // rotationStep: 10,
          gridSize: this.getGridSize(this.todayData.length), 
          drawOutOfBound: false,
          textStyle: {
            normal: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              color: function () {
                let colorArray = [
                  '#FF0033',
                  '#990066',
                  '#FFCC00',
                  '#CC0033',
                  '#FFCC33',
                  '#333399',
                  '#666699',
                  '#FFFF00',
                  '#FFFF33',
                  '#FFCC00',
                  '#009999',
                  '#CC3366',
                  '#CCCC00',
                  '#FF9933',
                  '#663399',
                  '#CC3333',
                  '#FFCCCC',
                  '#99CC00',
                  '#FF6600',
                  '#FF6666',
                  '#CCFF00',
                  '#66CCCC',
                  '#CCFFFF',
                  '#CCCCFF',
                  '#CCFF99',
                  '#FF3399',
                  '#6666FF',
                  '#9933FF',
                  '#66CCFF',
                  '#FF99CC',
                ];
                let index = Math.round(Math.random()*colorArray.length);
                let item = colorArray[index];
                return item;
              }
            },
            emphasis: {
              // shadowBlur: 10,//阴影距离
              // shadowColor: '#333'//阴影颜色
            }
          },
          data: this.todayData
        }]
      };
      todaywordcloud.setOption(option);
      setTimeout(function (){ //图表自适应
        window.onresize = function () {
          todaywordcloud.resize();
        }
	    },200)
    },
    setAllWordCloud () {
      let allwordcloud = this.$echarts.init(document.getElementById('allword'));
      var option = {
        backgroundColor: "#fff",
        series: [{
          type: 'wordCloud',
          shape: 'smooth',//设置云词形状
          left: 'center',
          top: 'center',
          width: '100%',
          height: '100%',
          right: null,
          bottom: null,
          sizeRange: [10, 48],//设置云词字体大小范围
          rotationRange: [0, 0],//设置云词旋转范围
          // rotationStep: 10,
          gridSize: this.getGridSize(this.allHotWord.length), 
          drawOutOfBound: false,
          textStyle: {
            normal: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              color: function () {
                let colorArray = [
                  '#FF0033',
                  '#990066',
                  '#FFCC00',
                  '#CC0033',
                  '#FFCC33',
                  '#333399',
                  '#666699',
                  '#FFFF00',
                  '#FFFF33',
                  '#FFCC00',
                  '#009999',
                  '#CC3366',
                  '#CCCC00',
                  '#FF9933',
                  '#663399',
                  '#CC3333',
                  '#FFCCCC',
                  '#99CC00',
                  '#FF6600',
                  '#FF6666',
                  '#CCFF00',
                  '#66CCCC',
                  '#CCFFFF',
                  '#CCCCFF',
                  '#CCFF99',
                  '#FF3399',
                  '#6666FF',
                  '#9933FF',
                  '#66CCFF',
                  '#FF99CC',
                ];
                let index = Math.round(Math.random()*colorArray.length);
                let item = colorArray[index];
                return item;
              }
            },
            emphasis: {
              // shadowBlur: 10,//阴影距离
              // shadowColor: '#333'//阴影颜色
            }
          },
          data: this.allHotWord
        }]
      };
      allwordcloud.setOption(option);
      setTimeout(function (){ //图表自适应
        window.onresize = function () {
          allwordcloud.resize();
        }
	    },200)
    },
    getGridSize(count) {
      if (count === 0) {
        return 2;
      }
      if (count > 0 && count <= 5) {
        return 24;
      }
      if (count > 5 && count <= 10) {
        return 20;
      }
      if (count > 10 && count <= 15) {
        return 16;
      }
      if (count > 15 && count <= 20) {
        return 14;
      }
      if (count > 20 && count <= 30) {
        return 12;
      }
      if (count > 30 && count <= 40) {
        return 10;
      }
      if (count > 40 && count <= 50) {
        return 8;
      }
      if (count > 50) {
        return 6;
      }
    },
    getData(){ //热销商品
      this.loading = true
      let params = {  //传入type 1 代表热词,2代表话题
        type:2
      }
      this.$axios.$post('hotWord',params).then(res => {
          this.loading = false
          if(res.status === 200 ){
            var newList1 = [];
            var newList2 = [];
            for (let index = 0; index < res.obj.todayData.length; index++) {
              let item = res.obj.todayData[index];
              var obj = {name: item.val,value: 10+index};
              newList1.push(obj);
            }
            this.todayData = newList1;
            for (let index = 0; index < res.obj.allData.length; index++) {
              let item = res.obj.allData[index];
              var obj = {name: item.val,value: 10+index};
              newList2.push(obj);
            }
            this.allHotWord = newList2;
            if (this.todayData.length > 0) {
              this.setTodayWordCloud()
            }
            if (this.allHotWord.length > 0) {
              this.setAllWordCloud()
            }
          }else{
              this.$message({
                  message:res.msg,  
                  type:'warning'
              })
          }
      })
      .catch(error => {
        this.loading = false
        this.$message({
            message:'请求失败',  
            type:'warning'
        })
      })
    }
  },
  mounted(){
    this.getData()
  }
}
</script>

<style scoped>
  .no-data{
    height:30px;
    line-height:30px;
    color:#666666;
    font-weight:bold;
    text-align:center;
    background:#ffffff;
    letter-spacing:2px;
    color:#666666;
    font-size:18px;
    margin:0 auto;
  }
  .gs-nav {
    font-size: 14px;
    color: #999;
    height: 50px;
    line-height: 50px;
  }
  .topic-red {
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0px -5px 0px #fe6663;
    padding: 20px;
  }
  .topic-blue {
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0px -5px 0px #0096e6;
    margin-top: 20px;
    padding: 20px;
  }
  .topic-title {
    display: flex;
    align-items: center;
  }
  .topic-title p {
    color: #333;
    font-size: 14px;
    margin-right: 7px;
  }
  .topic-title img {
    width: 26px;
    height: 14px;
  }
  .topic-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .topic-list p {
    width: 50%;
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
  }
  #todayword {
    min-width: 940px;
    height: 100px;
    margin: 0 auto;
  }
  #allword {
    min-width: 940px;
    height: 300px;
    margin:0 auto;
  }
</style>
